<template>
  <div
    class="notifly"
    :class="animation ? 'animasionNotifySET' : ''"
  >
    <div class="gold-img">
      <img src="@/assets/glod2.png" alt="" />
    </div>
    <div class="content-title">
      <span class="title-text">恭喜获得{{ messageGoldNum }}个租币！</span>
      <span class="second-title">任务完成</span>
    </div>
    <div class="right-gold-num">
      {{ `+${messageGoldNum}` }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ListItemType } from '../init-data-types'

const messageGoldNum = ref(0)
const animation = ref(false)

function useClosure(messageItem: ListItemType) {
  if (!messageItem.goldNum) return
  messageGoldNum.value = messageItem.goldNum
  animation.value = true
  setTimeout(() => {
    animation.value = false
  }, 3000)
}
defineExpose({
  useClosure,
})
</script>

<style lang="scss" scoped>
.right-gold-num {
  line-height: 26.5px;
  font-size: 19px;
  color: #fff;
  position: absolute;
  right: 26.5px;
}
.content-title {
  display: flex;
  flex-direction: column;
  .title-text {
    line-height: 21px;
    font-size: 15px;
    color: #fff;
  }
  .second-title {
    line-height: 16.5px;
    font-size: 12px;
    color: #fff;
    opacity: 0.77;
  }
}
.gold-img {
  width: 41px;
  height: 41px;
  overflow: hidden;
  margin-left: 13px;
}
@keyframes notiflySend {
  0% {
    transform: translateY(200%);
    opacity: 0;
  }

  40% {
    transform: translateY(1%);
    opacity: 1;
  }

  60% {
    transform: translateY(1%);
    opacity: 1;
  }

  100% {
    transform: translateY(200%);
    opacity: 0;
  }
}

.notifly {
  position: fixed;
  right: 10px;
  left: 10px;
  bottom: 7.5px;
  height: 55px;
  border-radius: 6px;
  display: flex;
  justify-content: start;
  align-items: center;
  transform: translateY(200%);
  background: rgba(000, 000, 000, 72%);
}

.animasionNotifySET {
  transform: translateY(200%);
  animation-name: notiflySend;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-duration: 3s;
}
</style>
